 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width2">新增收款账号</div>
      </div>
      <div class="content-con">
        <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" :label-width="150" class="payee-item">
          <Form-item label="收款人姓名" prop="name">
            <i-input v-model="formValidate.name" size="large" placeholder="请输入姓名"></i-input>
          </Form-item>
          <Form-item label="收款账号" prop="account">
            <i-input v-model="formValidate.account" size="large" placeholder="请输入收款账号"></i-input>
          </Form-item>
          <Form-item label="收款银行" prop="bank">
            <i-input v-model="formValidate.bank" size="large" placeholder="收款银行"></i-input>
          </Form-item>
          <Form-item label="总金额（元）" prop="money">
            <i-input v-model="formValidate.money" size="large" placeholder="总金额（元）"></i-input>
          </Form-item>
           <Form-item label="手续费" prop="fee">
             <i-input v-model="formValidate.fee" size="large" placeholder="手续费"></i-input>
           </Form-item>
          <Form-item label="状态" prop="statu">
            <Radio-group v-model="formValidate.statu" size="large">
              <Radio label="0">
                  <span>开启</span>
              </Radio>
              <Radio label="1">
                  <span>关闭</span>
              </Radio>
            </Radio-group>
          </Form-item>
          <div class="ban-btn">
            <i-button @click="handleSubmit()" class="save" size="large">保存</i-button>
            <i-button class="save" size="large" @click="btnClick1">返回</i-button>
          </div>
        </i-form>
      </div>
   </Card>

 </template>
 <script>

 export default {
   name: 'payee-add',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       // value: '',
       // statu:'开启',
       formValidate:{
         name: '',
         account: '',
         bank: '',
         money: '',
         fee: '',
         status: '0'
       },
       ruleValidate:{
         name:[
           {
             required: true,
             message: '请输入姓名',
             trigger: 'blur'
           }
         ],
         account:[
           {
             required: true,
             message: '请输入收款账号',
             trigger: 'blur'
           }
         ],
         bank:[
           {
             required: true,
             message: '收款银行',
             trigger: 'blur'
           }
         ],
         money:[
           {
             required: true,
             message: '总金额（元）',
             trigger: 'blur'
           }
         ],
         fee: [
               {
                 required: true,
                 message: '手续费（元）',
                 trigger: 'blur'
               }
              ],
         status:[
           {
             required: true,
             message: '请选择状态',
             trigger: 'change'
           }
         ]
        }
     };
   },
   methods: {
     // 返回按钮
     btnClick1(){
       this.$router.push({name:'account_payee'})
     },
     //表单验证
     handleSubmit () {
       this.$refs['formValidate'].validate((valid) =>{
         if (valid) {
           this.$Message.success('提交成功!');
         } else {
           this.$Message.error('表单验证失败!');
         }
       })
     }
   }
 };
 </script>
 <style lang="less">
     .payee-item .ivu-form-item-label{
       font-size: 14px;
     }
 </style>
